<template>
	<div class="u-page tpink-page-bgcolor">
		<u-navbar :title="Navbar.title" :custom-back="comeback" :background="Navbar.background" :border-bottom="false" :title-bold="true" title-color="#040503" back-icon-color="#040503"></u-navbar>
		<!-- 机会、商品、拍档 -->
		<div>
			<div>
				<div style="width: 100%;margin: 0 auto;">
					<u-swiper :list="posters" height="200" border-radius="0" @click="clickSwiper">
					</u-swiper>
				</div>
				<div class="u-pt-10 u-pb-10 u-pl-10 u-pr-10">
					<u-search :show-action="false" :clearabled="true" shape="square"
						:placeholder="hotText" bg-color="#fffdfe" v-model="keyword" @search="search"></u-search>
				</div>
			</div>

			<div>
				<div v-if="EnterpriseList && EnterpriseList.length>0" class="u-pb-20">
					<ul>
						<li :class="index==0?'services-li':'u-mt-10 services-li'" @click="toEPDetails(item)"
							v-for="(item, index) in EnterpriseList" :key="index">
							<div class="u-pb-15 services-li-item">
								<div class="u-flex-1 u-col-center">
									<div class="u-flex u-col-center u-flex-1">
										<div :class="isEnoughLength(item.enterpriseInfo.enterpriseName)?'os-job-name':'os-job-name2'">
											{{item.enterpriseInfo.enterpriseName?item.enterpriseInfo.enterpriseName:''}}
										</div>
										<div :class="isEnoughLength(item.enterpriseInfo.enterpriseName)?'u-pl-5':''">
											<u-image width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/Enterprise/EnterpriseLevel1.png" v-if="item.enterpriseInfo.enterpriseTop > 0"></u-image>
											<u-image width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/Enterprise/EnterpriseLevel2.png" v-else></u-image>
										</div>
									</div>
									<div class="u-flex u-pt-5">
										<div class="u-flex">
											<u-icon name="map" size="30"></u-icon>
											<div class="u-pl-5">
												{{item.enterpriseInfo.province?item.enterpriseInfo.province:''}} {{item.enterpriseInfo.city?item.enterpriseInfo.city:''}}
											</div>
										</div>
										<div class="u-pl-20 u-flex">
											<u-icon name="calendar" size="30"></u-icon>
											<div class="u-pl-5">成立{{getYearsByCreateTime(item.enterpriseInfo.establishmentDate)}}</div>
										</div>
									</div>
									<div class="u-pt-5 industry">
										{{item.enterpriseInfo.industry?item.enterpriseInfo.industry:''}}
									</div>
								</div>
								<div class="avatar-shadow">
									<u-avatar size="130" mode="square" bg-color="#ffffff" img-mode="scaleToFill" :src="item.enterpriseInfo.avatar"></u-avatar>
								</div>
							</div>
							<div class="divider-line"></div>
							<div class="u-pt-10 u-pb-5 u-flex">
								<div>
									旗下品牌
								</div>
								<div class="u-pl-10 brand-list">
									{{item.relevancyItemDto.brandList.length>0?item.relevancyItemDto.brandList.join(' '):'暂未入驻'}}
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div v-else>
					<div class="u-text-center" style="padding-top: 20%;">
						<u-empty text="暂无搜索结果" mode="data"></u-empty>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {
				posters: [],
				hotText: '请输入关键词',
				keyword: '',
				searchStr: '',
				pageNum: 1,
				pageSize: 10,
				EnterpriseList: [],
				Navbar: {
					title: '热门企业',
					background: {
						background: '#f1d7e0'
					}
				},
			};
		},

		onLoad(options) {
			this.getAds()
			this.getEnterpriseData()
		},

		onPullDownRefresh() {
			this.pageNum = 1
			this.getEnterpriseData()
			this.getAds()
			setTimeout(() => {
				// 停止Loading
				uni.stopPullDownRefresh();
			}, 1000)
		},

		onReachBottom() {
			this.pageNum += 1
			this.getEnterpriseData()
		},

		methods: {

			/**
			 * 获取广告图
			 */
			async getAds() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/config/list",
					configType: "ep-list"
				});
				if (result.code == 200) {
					let rows = result.rows
					if (rows.length > 0) {
						for (const i in rows) {
							if (rows[i].configKey == 'ep-list') {
								let obj = {
									image: rows[i].imageLink.split(",")[0],
									link: rows[i].configLink,
									source: rows[i].configFrom
								}
								this.posters.push(obj)
							}
						}
					}
				}
			},

			/**
			 * 点击轮播图跳转
			 */
			clickSwiper(index) {
				this.routeAD(this.posters[index].link, this.posters[index].source)
			},
			
			/**
			 * 获取热门企业数据
			 */
			async getEnterpriseData() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/enterprise/applet/page/list",
					searchStr: this.searchStr,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					loading: true
				});
				if (result.code == 200) {
					if (this.pageNum != 1) {
						this.EnterpriseList = this.EnterpriseList.concat(result.rows)
					} else {
						this.EnterpriseList = result.rows
					}
				}
			},
			
			//生成一个根据日期参数返回距离今天是多少年，如果不够一年则返回月份数的函数
			getYearsByCreateTime(createTime){
				const date = new Date(createTime)
				const today = new Date()
				const diffInMilliseconds = today - date
				const diffInYears = parseInt(diffInMilliseconds / (1000 * 60 * 60 * 24 * 365))
				const diffInMonths = parseInt((diffInMilliseconds % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24 * 30))
				if (diffInYears >= 1) {
					return diffInYears + "年"
				} else {
					return diffInMonths + "个月"
				}
			},

			search() {
				this.pageNum = 1
				this.searchStr = this.keyword
				this.getEnterpriseData()
			},

			/** 
			 * 跳转到工作详情
			 */
			toEPDetails(item) {
				if(this.isNotNull(item.enterpriseInfo.userId)){
					this.$u.route('pages_tabbar_contact/index_contact/EnterpriseInfo?userId=' + item.enterpriseInfo.userId + '&enterpriseNo=' + item.enterpriseInfo.enterpriseNo)
				}
			},
			
			/** 
			 * 根据公司名称的长度计算是否在范围内
			 */
			isEnoughLength(name) {
				return this.$u.test.rangeLength(name, [0, 15])
			}
			
		},
	};
</script>

<style scoped>

	/* 两行或多行显示... */
	.line-ellipsis {
		width: 320rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
	}

	.services-li {
		width: 95%;
		margin: 0 auto;
		background-color: #fffdfe;
		padding: 30rpx 20rpx;
		/* margin-top: 20rpx; */
		border-radius: 10rpx;
		/* box-shadow: 2rpx 6rpx 20rpx #efebeb;
		border-bottom: 2rpx solid #efebeb;
		border-right: 2rpx solid #efebeb; */
	}
	
	.services-li-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.os-job-name {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.os-job-name2 {
		font-size: 32rpx;
		font-weight: bold;
		width: 460rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
	.sub-text-color {
		color: #bcbcbc;
	}
	
	.divider-line {
		width: 70%;
		border-bottom: 2rpx #efeeee  solid;
	}
	
	.brand-list {
		width: 550rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
	.industry {
		width: 470rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
	.avatar-shadow {
		border-radius: 10rpx;
		box-shadow: 0 5rpx 5rpx 0rpx #ebebeb;
	}

</style>
